import React, {useState} from 'react';

const App = () => {

  // 对于一个对象中有些属性会被修改，而有些属性是固定不变的
  // 如果不需要设置修改值，那么第二个参数可以不写
  const [box] = useState({
    w: 100,
    h:100,
  })
  const [obj,setObj] = useState({
    x: 0,
    y:0
  })
  function mouseMove(event){
    setObj({
      x: event.clientX,
      y: event.clientY
    })
  }

  return (
    <div style={{width:'100vw', height:'100vh'}} onMouseMove={mouseMove}>
      <div>元素的宽度: {box.w}   元素的高度：{box.h}</div>
      <div>元素的坐标: {obj.x} --- {obj.y}</div>
    </div>
  );
};

export default App;
